<template>
  <div class="image-select">
    <div class="container" @click="dialogVisible = true">
      <img v-if="url" :src="url" :alt="url" />
      <span v-else>图片选择</span>
    </div>
    <el-dialog title="图片选择" :visible.sync="dialogVisible" v-dialog-drag width="840px">
      <div class="dialog">
        <UploadFile :isSelect="true" @selectImg="_selectImg" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadFile from "@/views/UploadFile/index.vue";
export default {
  components: {
    UploadFile,
  },
  name: "image-select",
  props: {
    value: {
      type: String,
      require: false,
      default: "",
    },
    type: {
      type: String,
    },
    label: {
      type: String,
      require: false,
      default: null,
    },
  },
  model: {
    prop: "value",
    event: "input",
  },
  data() {
    return {
      dialogVisible: false,
      url: this.value,
    };
  },
  methods: {
    _selectImg(data) {
      this.url = data;
      this.$emit("change", {
        key: this.type,
        value: data,
      });
      this.dialogVisible = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.image-select {
  width: 100%;

  .container {
    width: 100%;
    height: 84px;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f4f4f4;
    font-size: 12px;
    color: #ddd;
    cursor: pointer;
    overflow: hidden;
  }

  .dialog {
    width: 100%;
    height: 580px;
    border: 1px solid #dcdfe6;
  }

  & img {
    width: 100%;
    height: 100%;
  }
}

::v-deep {
  .el-dialog__body {
    padding: 0px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
}
</style>